<template>
    <view class="verification">
        <view class="text">验证码已发送至 {{ show_phone }}</view>
        <view class="code">
            <u-code-input v-if="initCodeInput" :maxlength="6" :focus="true" @finish="finishCode"></u-code-input>
        </view>
        <view class="again">
            <u-button :disabled="disabled_btn" :text="btn_text" class="getCodeBtn" @click="sendCode"></u-button>
        </view>
        <u-modal :show="show_code" title="浮城书斋" :content='content' @confirm="() => { show_code = false }"></u-modal>
    </view>
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, nextTick } from 'vue'
import { getLocationParams } from '@/utils/getLocationParams'
import { decrypt } from '@/utils/crypto'
import { getCodeByPhone, loginByCode } from '@/api/login/login'
const phone = ref('')
const show_phone = ref('')
const disabled_btn = ref(true)
const btn_text = ref('')
const show_code = ref(false)
const content = ref('')
const uid = ref(0)
const initCodeInput = ref(true)
let inter: any = ref(null)

onBeforeMount(() => {
    phone.value = decrypt(getLocationParams('phone'))
    let phone_length = phone.value.length
    show_phone.value = phone.value.slice(0, 3) + '****' + phone.value.slice(phone_length - 4, phone_length)
    sendCode()
})
const sendCode = () => {
    getCodeByPhone({ phone: phone.value }).then((res: any) => {
        if (res.code != 200) {
            return
        }
        uid.value = res.uid
        content.value = '您的验证码是' + res.auto_code
        show_code.value = true
    })


    disabled_btn.value = true
    let time = 60
    inter = setInterval(() => {
        btn_text.value = '重新获取验证码(' + time + ')'
        --time
        if (time == 0) {
            clearInterval(inter)
            btn_text.value = '重新获取验证码'
            disabled_btn.value = false
        }
    }, 1000)
}

const finishCode = (code: Number) => {
    loginByCode({ code, uid: uid.value }).then((res: any) => {
        if (res.code != 200) {
            initCodeInput.value = false
            nextTick(() => {
                initCodeInput.value = true
                if (inter) {
                    clearInterval(inter)
                    btn_text.value = '重新获取验证码'
                    disabled_btn.value = false
                }
            })
            return
        }
        uni.showToast({
            icon: 'success',
            duration: 3000,
            title: '登录成功'
        })
        uni.setStorage({
            key: 'user_token',
            data: res.token
        })
        uni.switchTab({
            url: '/pages/mine/mine'
        });
    })
    // 登录
} 
</script>

<style lang="scss" scoped>
.verification {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
    overflow: hidden;

    .text {
        margin-top: 70rpx;
        width: 100%;
        height: 32rpx;
        line-height: 32rpx;
        text-align: center;
        font-size: 32rpx;
        color: #333333;
    }

    .code {
        margin-top: 60rpx;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .again {
        margin-top: 60rpx;

        .getCodeBtn {
            background-color: #009a89;
            width: 300rpx;
            // float: left;
            // margin-left: 96rpx;
            border-radius: 24rpx;
            color: #FFF;
        }
    }
}
</style>